<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()"
    />

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @input="input"
    >
      <template #action>
        <div @click="searchAriticle(keyword)">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="suggestionList.length>0">
      <van-cell v-for="(item,index) in showSuggestionList" :key="index" icon="search" @click="searchAriticleSuggestion(index)">
        <div v-html="item" />
      </van-cell>

    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell v-for=" item in historyRecordList" :key="item" :title="item" @click="clickHistory(item)">
        <van-icon name="close" @click.stop="delHistory(item)" />
      </van-cell>

    </van-cell-group>

    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { setHistory, getHistory } from '@/utils/storage'

import { reqSuggestion } from '@/api/search'
export default {
  name: 'Search',
  data() {
    return {
      keyword: '', // 搜索关键字,
      suggestionList: [],
      showSuggestionList: [],
      historyRecordList: getHistory(),
      timer: null

    }
  },
  methods: {
    input() {
      clearTimeout(this.timer)
      this.timer = setTimeout(async() => {
        if (!this.keyword) {
          this.suggestionList = []
          return
        }
        const res = await reqSuggestion(this.keyword)
        this.suggestionList = res.data.options
        const regExp = new RegExp(this.keyword, 'ig')
        this.showSuggestionList = this.suggestionList.map(item => {
          const newStr = item.replace(regExp, (match) => {
            return ` <span style="color:blue">${match}</span>`
          })
          return newStr
        })
      }, 300)
    },
    searchAriticle(keyword) {
      // 获取他们的值保存下来
      // 1.先判断与以前的历史记录有没有重复的
      // 2.unshift到数组
      // 3.utils localStorage

      const noRepetitionStrArr = this.historyRecordList.filter(item => item !== keyword)
      noRepetitionStrArr.unshift(keyword)
      this.historyRecordList = noRepetitionStrArr
      setHistory(this.historyRecordList)
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword
        }
      })
    },
    searchAriticleSuggestion(index) {
      const keyword = this.suggestionList[index]

      const noRepetitionStrArr = this.historyRecordList.filter(item => item !== keyword)
      noRepetitionStrArr.unshift(keyword)
      this.historyRecordList = noRepetitionStrArr
      setHistory(this.historyRecordList)
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword
        }
      })
    },
    delHistory(delItem) {
      this.historyRecordList = this.historyRecordList.filter(item => item !== delItem)
      setHistory(this.historyRecordList)
    },
    clickHistory(item) {
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword: item
        }
      })
    }

  }

}
</script>

<style lang="" scoped>

</style>
